import React from "react";
import "../css/Counter.css";
import {connect} from "react-redux";
import {plusAction,minusAction} from "../redux/actions";

class Counter extends React.Component{
  constructor(props){
    super(props)
    // this.state = {
    //   count:1
    // }
  }

  render(){
    return(
      <div className="counter_container">
        <button onClick={()=>{
          // this.state.count++;
          // this.setState({
          //   count:this.state.count
          // })
          this.props.plus(plusAction())
        }}>+</button>
        <div>{this.props.count}</div>
        <button onClick={()=>{
          // this.state.count--;
          // if(this.state.count < 1){
          //   this.state.count = 1;
          // }

          // this.setState({
          //   count:this.state.count
          // })
          this.props.minus(minusAction())
        }}>-</button>
      </div>
    );
  }
}

//将组件的状态 从 redux读取并且放到组件props属性中
function mapStateToProps(rootReducer){
  return{
    count:rootReducer.countReducer.count
  }
}
//将提交action方法合并到组件props中
function mapActionToProps(dispatch){
  return{
    plus:(action)=>{dispatch(action)},
    minus:(action)=>{dispatch(action)}
  }
}
export default connect(mapStateToProps,mapActionToProps)(Counter);